<template>
    <fieldset>
        <legend>{{ $store.state.product.name }}</legend>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>产品名称:{{ item.title }}</b>
                ----
                <b>价格:{{ item.price }}</b>
                ----
                <b>库存:{{ item.inventory }}</b>
                ----
                <button @click="add(item)" :disabled="item.inventory===0">点入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
//需求:
//1.获取购物车数据

//2.点击加入购物车,将数据添加到cart这个模块中

import { mapActions, mapState } from "vuex"

export default {
    computed: {
        ...mapState('product', ['products'])
    },
    mounted() {
        //触发action
        this.FETCH_PRODUCT()
    },
    methods: {
        add(item){
            this.ADD_TO_CART(item)
        },
        ...mapActions('product', ['FETCH_PRODUCT']),
        ...mapActions('cart',['ADD_TO_CART'])
    }
}
</script>